<template>
	<view class="content">
		<view v-if="showLoginModal" class="modal-overlay">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">提示</text>
				</view>
				<view class="modal-body">
					<text>已过期请重新登录</text>
				</view>
				<view class="modal-footer">
					<button class="modal-btn" @click="redirectToLogin">去登录</button>
					<button class="modal-btn cancel" @click="showLoginModal = false">取消</button>
				</view>
			</view>
		</view>

		<view v-if="isLoading" class="loading-container">
			<text>加载中...</text>
		</view>
		
	
		<view v-else class="form-container">
			<view class="form-item">
				<text class="label">姓名</text>
				<input class="input" v-model="form.stuName" placeholder="请输入姓名" />
				<text class="required">*</text>
			</view>

			<view class="form-item">
				<text class="label">身份证号</text>
				<input class="input" v-model="form.stuIdnumber" placeholder="请输入身份证号" />
				<text class="required">*</text>
			</view>

			<view class="form-item">
				<text class="label">省份</text>
				<picker class="picker" mode="selector" :range="provinces" range-key="name" @change="onProvinceChange"
					:value="provinceIndex">
					<view class="picker-text">{{ form.province  || '请选择省份' }}</view>
				</picker>
				<text class="required">*</text>
			</view>

			<view class="form-item">
				<text class="label">市区</text>
				<picker class="picker" mode="selector" :range="cities" range-key="name" @change="onCityChange"
					:value="cityIndex" :disabled="!form.province">
					<view class="picker-text">{{ form.city || (form.province ? '请选择市区' : '请先选择省份') }}</view>
				</picker>
				<text class="required">*</text>
			</view>

			<view class="form-item">
				<text class="label">工作单位</text>
				<input class="input" v-model="form.workplace" placeholder="请输入工作单位" />
				<text class="required">*</text>
			</view>

			<!-- <view class="form-item">
				<text class="label">手机号码</text>
				<input class="input" v-model="form.stuPhone" placeholder="请输入手机号码" type="number" />
				<text class="required">*</text>
			</view> -->

			<view class="form-item">
				<text class="label">招生老师</text>
				<input class="input" v-model="form.teacher" placeholder="请输入招生老师" />
				<text class="required">*</text>
			</view>

			<view class="form-item">
				<text class="label">邮箱</text>
				<input class="input" v-model="form.email" placeholder="请输入邮箱(选填)" type="email" />
			</view>

			<view class="form-item">
				<text class="label">微信号码</text>
				<input class="input" v-model="form.weixin" placeholder="请输入微信号码" />
				<text class="required">*</text>
			</view>

			<button class="submit-btn" @click="submitForm">保存</button>
			<button v-if="showPaymentButton" class="submit-btn payment-btn" @click="goToPayment">去缴费</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				id: "",
				stuName: "",
				stuIdnumber: "",
				workplace: "",
				stuPhone: "",
				teacher: "",
				photo: "",
				endDate: "",
				startDate: "",
				place: "",
				institution: "",
				jiaocai: "",
				application: "",
				payment: "",
				region: "",
				city: "",
				email: "",
				payChannel: "",
				weixin: "",
			},
			isLoading: true,
			showLoginModal: false,
			showPaymentButton: false,
			provinceIndex: 0,
			cityIndex: 0,
			shouldCheckPayment: false,
			paymentOrderNo: null,
			provinces: [
				{ name: '北京市', cities: ['东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区', '顺义区', '通州区', '大兴区', '房山区', '门头沟区', '昌平区', '平谷区', '密云区', '延庆区'] },
				{ name: '天津市', cities: ['和平区', '河东区', '河西区', '南开区', '河北区', '红桥区', '东丽区', '西青区', '津南区', '北辰区', '武清区', '宝坻区', '滨海新区', '宁河区', '静海区', '蓟州区'] },
				{ name: '河北省', cities: ['石家庄市', '唐山市', '秦皇岛市', '邯郸市', '邢台市', '保定市', '张家口市', '承德市', '沧州市', '廊坊市', '衡水市', '定州市', '辛集市'] },
				{ name: '山西省', cities: ['太原市', '大同市', '阳泉市', '长治市', '晋城市', '朔州市', '晋中市', '运城市', '忻州市', '临汾市', '吕梁市'] },
				{ name: '内蒙古自治区', cities: ['呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市', '鄂尔多斯市', '呼伦贝尔市', '巴彦淖尔市', '乌兰察布市', '兴安盟', '锡林郭勒盟', '阿拉善盟'] },
				{ name: '辽宁省', cities: ['沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市', '阜新市', '辽阳市', '盘锦市', '铁岭市', '朝阳市', '葫芦岛市'] },
				{ name: '吉林省', cities: ['长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '松原市', '白城市', '延边朝鲜族自治州'] },
				{ name: '黑龙江省', cities: ['哈尔滨市', '齐齐哈尔市', '鸡西市', '鹤岗市', '双鸭山市', '大庆市', '伊春市', '佳木斯市', '七台河市', '牡丹江市', '黑河市', '绥化市', '大兴安岭地区'] },
				{ name: '上海市', cities: ['黄浦区', '徐汇区', '长宁区', '静安区', '普陀区', '虹口区', '杨浦区', '闵行区', '宝山区', '嘉定区', '浦东新区', '金山区', '松江区', '青浦区', '奉贤区', '崇明区'] },
				{ name: '江苏省', cities: ['南京市', '无锡市', '徐州市', '常州市', '苏州市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市', '镇江市', '泰州市', '宿迁市'] },
				{ name: '浙江省', cities: ['杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市', '丽水市'] },
				{ name: '安徽省', cities: ['合肥市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市', '铜陵市', '安庆市', '黄山市', '滁州市', '阜阳市', '宿州市', '六安市', '亳州市', '池州市', '宣城市'] },
				{ name: '福建省', cities: ['福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龙岩市', '宁德市'] },
				{ name: '江西省', cities: ['南昌市', '景德镇市', '萍乡市', '九江市', '新余市', '鹰潭市', '赣州市', '吉安市', '宜春市', '抚州市', '上饶市'] },
				{ name: '山东省', cities: ['济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市', '泰安市', '威海市', '日照市', '临沂市', '德州市', '聊城市', '滨州市', '菏泽市'] },
				{ name: '河南省', cities: ['郑州市', '开封市', '洛阳市', '平顶山市', '安阳市', '鹤壁市', '新乡市', '焦作市', '濮阳市', '许昌市', '漯河市', '三门峡市', '南阳市', '商丘市', '信阳市', '周口市', '驻马店市', '济源市'] },
				{ name: '湖北省', cities: ['武汉市', '黄石市', '十堰市', '宜昌市', '襄阳市', '鄂州市', '荆门市', '孝感市', '荆州市', '黄冈市', '咸宁市', '随州市', '恩施土家族苗族自治州', '仙桃市', '潜江市', '天门市', '神农架林区'] },
				{ name: '湖南省', cities: ['长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市', '益阳市', '郴州市', '永州市', '怀化市', '娄底市', '湘西土家族苗族自治州'] },
				{ name: '广东省', cities: ['广州市', '韶关市', '深圳市', '珠海市', '汕头市', '佛山市', '江门市', '湛江市', '茂名市', '肇庆市', '惠州市', '梅州市', '汕尾市', '河源市', '阳江市', '清远市', '东莞市', '中山市', '潮州市', '揭阳市', '云浮市'] },
				{ name: '广西壮族自治区', cities: ['南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '钦州市', '贵港市', '玉林市', '百色市', '贺州市', '河池市', '来宾市', '崇左市'] },
				{ name: '海南省', cities: ['海口市', '三亚市', '三沙市', '儋州市', '五指山市', '琼海市', '文昌市', '万宁市', '东方市', '定安县', '屯昌县', '澄迈县', '临高县', '白沙黎族自治县', '昌江黎族自治县', '乐东黎族自治县', '陵水黎族自治县', '保亭黎族苗族自治县', '琼中黎族苗族自治县'] },
				{ name: '重庆市', cities: ['万州区', '涪陵区', '渝中区', '大渡口区', '江北区', '沙坪坝区', '九龙坡区', '南岸区', '北碚区', '綦江区', '大足区', '渝北区', '巴南区', '黔江区', '长寿区', '江津区', '合川区', '永川区', '南川区', '璧山区', '铜梁区', '潼南区', '荣昌区', '开州区', '梁平区', '武隆区', '城口县', '丰都县', '垫江县', '忠县', '云阳县', '奉节县', '巫山县', '巫溪县', '石柱土家族自治县', '秀山土家族苗族自治县', '酉阳土家族苗族自治县', '彭水苗族土家族自治县'] },
				{ name: '四川省', cities: ['成都市', '自贡市', '攀枝花市', '泸州市', '德阳市', '绵阳市', '广元市', '遂宁市', '内江市', '乐山市', '南充市', '眉山市', '宜宾市', '广安市', '达州市', '雅安市', '巴中市', '资阳市', '阿坝藏族羌族自治州', '甘孜藏族自治州', '凉山彝族自治州'] },
				{ name: '贵州省', cities: ['贵阳市', '六盘水市', '遵义市', '安顺市', '毕节市', '铜仁市', '黔西南布依族苗族自治州', '黔东南苗族侗族自治州', '黔南布依族苗族自治州'] },
				{ name: '云南省', cities: ['昆明市', '曲靖市', '玉溪市', '保山市', '昭通市', '丽江市', '普洱市', '临沧市', '楚雄彝族自治州', '红河哈尼族彝族自治州', '文山壮族苗族自治州', '西双版纳傣族自治州', '大理白族自治州', '德宏傣族景颇族自治州', '怒江傈僳族自治州', '迪庆藏族自治州'] },
				// { name: '西藏自治区', cities: ['拉萨市', '日喀则市', '昌都市', '林芝市', '山南市', '那曲市', '阿里地区'] },
				{ name: '陕西省', cities: ['西安市', '铜川市', '宝鸡市', '咸阳市', '渭南市', '延安市', '汉中市', '榆林市', '安康市', '商洛市'] },
				{ name: '甘肃省', cities: ['兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '武威市', '张掖市', '平凉市', '酒泉市', '庆阳市', '定西市', '陇南市', '临夏回族自治州', '甘南藏族自治州'] },
				{ name: '青海省', cities: ['西宁市', '海东市', '海北藏族自治州', '黄南藏族自治州', '海南藏族自治州', '果洛藏族自治州', '玉树藏族自治州', '海西蒙古族藏族自治州'] },
				{ name: '宁夏回族自治区', cities: ['银川市', '石嘴山市', '吴忠市', '固原市', '中卫市'] },
				{ name: '新疆维吾尔自治区', cities: ['乌鲁木齐市', '克拉玛依市', '吐鲁番市', '哈密市', '昌吉回族自治州', '博尔塔拉蒙古自治州', '巴音郭楞蒙古自治州', '阿克苏地区', '克孜勒苏柯尔克孜自治州', '喀什地区', '和田地区', '伊犁哈萨克自治州', '塔城地区', '阿勒泰地区'] },
				// { name: '台湾省', cities: ['台北市', '新北市', '桃园市', '台中市', '台南市', '高雄市', '基隆市', '新竹市', '嘉义市', '新竹县', '苗栗县', '彰化县', '南投县', '云林县', '嘉义县', '屏东县', '宜兰县', '花莲县', '台东县', '澎湖县', '金门县', '连江县'] },
				// { name: '香港特别行政区', cities: ['中西区', '湾仔区', '东区', '南区', '油尖旺区', '深水埗区', '九龙城区', '黄大仙区', '观塘区', '荃湾区', '屯门区', '元朗区', '北区', '大埔区', '西贡区', '沙田区', '葵青区', '离岛区'] },
				// { name: '澳门特别行政区', cities: ['花地玛堂区', '圣安多尼堂区', '大堂区', '望德堂区', '风顺堂区', '嘉模堂区', '圣方济各堂区'] }
			],
			cities: []
		}
	},
	onLoad() {
		this.checkLoginAndFetchData()
	},
	
	onShow() {
		if (this.shouldCheckPayment && this.paymentOrderNo) {
			this.checkPaymentStatus(this.paymentOrderNo);
			this.shouldCheckPayment = false;
		}
	},
	methods: {
		checkLoginAndFetchData() {
			const userId = uni.getStorageSync('userId')
			const token = uni.getStorageSync('token')
			const userPhone = uni.getStorageSync('userPhone')
			
			this.form.id = userId || ""
			
			// 仅对需要登录的功能进行验证
			if (!userId || !token) {
				this.showLoginModal = true
				this.isLoading = false
				return
			}
			
			uni.request({
				url: `https://www.xn--fiq799a58u.xn--fiqs8s/api/student/getStudentById?id=${userId}`,
				method: 'GET',
				header: {
					'Content-Type': 'application/json',
					'Authorization': `Bearer ${token}`
				},
				success: (res) => {
					if (res.statusCode === 200) {
						const userData = res.data
						this.form.stuName = userData.stuName || ""
						this.form.stuIdnumber = userData.stuIdnumber || ""
						this.form.workplace = userData.workplace || ""
						this.form.stuPhone = userData.stuPhone || userPhone || ""
						this.form.teacher = userData.teacher || ""
						this.form.city = userData.city || ""
						this.form.province = userData.region || userData.province || ""
						this.form.email = userData.email || ""
						this.form.weixin = userData.weixin || ""
						
						// 设置省份索引
						if (this.form.province) {
							const provinceIndex = this.provinces.findIndex(p => p.name === this.form.province);
							if (provinceIndex !== -1) {
								this.provinceIndex = provinceIndex;
								this.cities = this.provinces[provinceIndex].cities.map(city => ({ name: city }));
							}
						}
					} else if (res.statusCode === 403) {
						this.showLoginModal = true
					}
				},
				fail: (err) => {
					console.error('获取用户信息失败:', err)
				},
				complete: () => {
					this.isLoading = false
				}
			})
		},
		
		redirectToLogin() {
			uni.navigateTo({
				url: '/pages/login/index'
			})
		},
		
		onProvinceChange(e) {
			this.provinceIndex = e.detail.value
			this.form.province = this.provinces[this.provinceIndex].name
			this.form.region = this.form.province; // 将省份名称同时赋值给 region
			this.cities = this.provinces[this.provinceIndex].cities.map(city => ({ name: city }))
			this.form.city = '' // 重置城市选择
			this.cityIndex = 0
		},
		onCityChange(e) {
			this.cityIndex = e.detail.value
			this.form.city = this.cities[this.cityIndex].name
		},
		submitForm() {
			// 验证必填字段
			if (!this.form.stuName) {
				uni.showToast({ title: '请输入姓名', icon: 'none' })
				return
			}
			if (!this.form.stuIdnumber) {
				uni.showToast({ title: '请输入身份证号', icon: 'none' })
				return
			}
			if (!this.form.province) {
				uni.showToast({ title: '请选择省份', icon: 'none' })
				return
			}
			if (!this.form.city) {
				uni.showToast({ title: '请选择市区', icon: 'none' })
				return
			}
			if (!this.form.workplace) {
				uni.showToast({ title: '请输入工作单位', icon: 'none' })
				return
			}
			// if (!this.form.stuPhone) {
			// 	uni.showToast({ title: '请输入手机号码', icon: 'none' })
			// 	return
			// }
			if (!this.form.teacher) {
				uni.showToast({ title: '请输入招生老师', icon: 'none' })
				return
			}
			if (!this.form.weixin) {
				uni.showToast({ title: '请输入微信号码', icon: 'none' })
				return
			}

			// 身份证号验证
			if (!this.checkIdCard(this.form.stuIdnumber)) {
				uni.showToast({ title: '身份证号格式不正确', icon: 'none' })
				return
			}

			// // 手机号验证
			// if (!this.checkPhone(this.form.stuPhone)) {
			// 	uni.showToast({ title: '手机号码格式不正确', icon: 'none' })
			// 	return
			// }

			// 邮箱验证（选填，如果填写了则验证）
			if (this.form.email && !this.checkEmail(this.form.email)) {
				uni.showToast({ title: '邮箱格式不正确', icon: 'none' })
				return
			}

			// 提交表单逻辑
			console.log('提交表单:', this.form)
			uni.showLoading({ title: '提交中...' })
			
			const token = uni.getStorageSync('token')
			
			uni.request({
				url: 'https://www.xn--fiq799a58u.xn--fiqs8s/api/student/add',
				method: 'POST',
				header: {
					'Content-Type': 'application/json',
					'Authorization': `Bearer ${token}`
				},
				data: {
					...this.form,
					id: uni.getStorageSync('userId'),
					action: "save",
					photoBase64: this.form.photo ? this.form.photo.split(',')[1] : ""
				},
				success: (res) => {
					uni.hideLoading()
					if (res.statusCode === 200) {
						uni.showToast({ title: '报名成功' })
						this.showPaymentButton = true
					} else {
						uni.showToast({ 
							title: res.data.message || '报名失败',
							icon: 'none'
						})
					}
				},
				fail: (err) => {
					uni.hideLoading()
					uni.showToast({ 
						title: '网络错误，请重试',
						icon: 'none'
					})
					console.error('API调用失败:', err)
				}
			})
		},
		checkIdCard(idCard) {
			// 简单的身份证号验证
			const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
			return reg.test(idCard)
		},
		checkPhone(phone) {
			// 手机号验证
			const reg = /^1[3-9]\d{9}$/
			return reg.test(phone)
		},
		checkEmail(email) {
			// 邮箱验证
			const reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
			return reg.test(email)
		},
		goToPayment() {
			uni.showLoading({ title: '加载中...' });
			const token = uni.getStorageSync('token');
			const userId = uni.getStorageSync('userId');

			uni.request({
				url: `https://www.xn--fiq799a58u.xn--fiqs8s/api/pay/wxapp`,
				method: 'GET',
				header: {
					'Content-Type': 'application/json',
					'Authorization': `Bearer ${token}`
				},
				data: {
					id: userId
				},
				success: (res) => {
					uni.hideLoading();
					if (res.statusCode === 200) {
						const paymentParams = res.data;
						// 跳转到第三方平台
						wx.openEmbeddedMiniProgram({
							appId: "wxe48aedff31caaf2d",
							path: "pages/index/index",
							extraData: {
								...paymentParams
							},
							success: (res) => {
								console.log("跳转成功:", res);
								// 存储订单号用于返回时查询
							this.paymentOrderNo = paymentParams.mchOrderNo;
							this.shouldCheckPayment = true;
							},
							fail: (res) => {
								console.log("跳转失败:", res);
								uni.showToast({ title: '跳转失败，请重试', icon: 'none' });
							}
						});
					} else {
						uni.showToast({ title: '获取支付参数失败', icon: 'none' });
					}
				},
				fail: (err) => {
					uni.hideLoading();
					uni.showToast({ title: '网络错误，请重试', icon: 'none' });
					console.error('API调用失败:', err);
				}
			});
		},
		checkPaymentStatus(orderNo) {
			uni.showLoading({ title: '查询支付状态中...', mask: true });
			const token = uni.getStorageSync('token');

			uni.request({
				url: `https://www.xn--fiq799a58u.xn--fiqs8s/api/pay/query?oderId=${orderNo}`,
				method: 'GET',
				header: {
					'Content-Type': 'application/json',
					'Authorization': `Bearer ${token}`
				},
				success: (res) => {
					uni.hideLoading();
					if (res.data.code === 0 && res.data.msg === 'SUCCESS' && res.data.data.state === 2) {
						uni.showToast({ title: '支付成功', icon: 'success' });
					} else if (res.data.status === "UNPAID") {
						uni.showToast({ title: '订单未支付', icon: 'none' });
					} else {
						uni.showToast({ title: '支付状态查询失败', icon: 'none' });
					}
				},
				fail: (err) => {
					uni.hideLoading();
					uni.showToast({ 
						title: '网络错误，请检查网络后重试',
						icon: 'none',
						duration: 3000
					});
					console.error('查询支付状态失败:', err);
				}
			});
		}
	}
}
</script>

<style>
.content {
	padding: 20rpx;
	background-color: #f5f5f5;
	position: relative;
}

/* 加载中样式 */
.loading-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

/* 模态框样式 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
}

.modal-content {
	background-color: #fff;
	border-radius: 10rpx;
	width: 80%;
	max-width: 600rpx;
	overflow: hidden;
}

.modal-header {
	padding: 30rpx;
	border-bottom: 1rpx solid #eee;
}

.modal-title {
	font-size: 36rpx;
	font-weight: bold;
}

.modal-body {
	padding: 40rpx 30rpx;
	text-align: center;
}

.modal-footer {
	padding: 20rpx 30rpx;
	display: flex;
	justify-content: space-around;
	border-top: 1rpx solid #eee;
}

.modal-btn {
	background-color: #007aff;
	color: white;
	border: none;
	border-radius: 10rpx;
	padding: 16rpx 30rpx;
	font-size: 28rpx;
	width: 45%;
}

.modal-btn.cancel {
	background-color: #f2f2f2;
	color: #333;
}

.form-container {
	background-color: #fff;
	border-radius: 10rpx;
	padding: 30rpx;
}

.form-item {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	position: relative;
}

.label {
	width: 180rpx;
	font-size: 28rpx;
	color: #333;
}

.input {
	flex: 1;
	height: 80rpx;
	border: 1rpx solid #ddd;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
}

.picker {
	flex: 1;
}

.picker-text {
	height: 80rpx;
	line-height: 80rpx;
	border: 1rpx solid #ddd;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	color: #666;
}

.required {
	color: red;
	margin-left: 10rpx;
	position: absolute;
	right: -20rpx;
	top: 10rpx;
}

.submit-btn {
	margin-top: 50rpx;
	background-color: #007AFF;
	color: white;
	border-radius: 8rpx;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
}

.submit-btn:active {
	background-color: #0062CC;
}
</style>